javascript(event&DOM)(DAY18)

2021 iThome 鐵人賽

DAY 18

Modern Web

網頁前端基礎&Vue.js系列第 18 篇

13th鐵人賽

Vince

2021-10-01 09:28:30

728 瀏覽

分享至

這篇文章會介紹event和DOM，event事件的意思是說我們設計網頁可以使用事件處理器（event handlers）監聽網頁使用者的行為，像是上一篇介紹的onclick，當發生使用者用滑鼠左鍵點選html元素的行為時;還有像是當使用者將網頁載入時等事件。而DOM(Document Object Model)文件物件模型的意思則是以物件的方式來存取文件(html)的內容，也就是使用一組API(程式介面)達成html和javascript之間的溝通橋樑，使javascript能夠對html存取等各種操作。

DOM將html文件定義成樹狀結構

<html>
<head>
<meta charset="utf-8" />
    <style>
    </style>
</head>
<body>
        <h1>樂氣球嘉年華</h1>
        <video src="IMG_4736.MOV"></video>
</body>
</html>

Html是document的子節點
document是Html的父節點
head和 body是兄弟節點

節點v.s元素節點

節點會包含文字節點和文件宣告型別等(文字節點:像是空白、換行字元 和文件宣告型別:<!DOCTYPE html>等)，而元素節點則不包含文字節點和文件宣告型別，在javascript較常使用到元素節點。

存取子節點

head:存取head元素的子節點
body: 存取body元素的子節點
firstChild:存取第一個子節點
lastChild: 存取最後一個子節點
ChildNodes:傳回所有子節點(可以使用childNodes[]來指定要取第幾個子節點，ex:childNodes[3]，代表存取第三個子節點，0為開始子節點)

<script>
            document.head.firstChild;
            //存取head下的第一個子節點
            document.body.childNodes[3];
            //存取body下的第三個子節點
            document.firstChild;
            //存取第一個子節點
            document.lastChild;
            //存取最後一個子節點
            document.childNodes;
            //存取document下的所有子節點
 </script>

存取元素節點

<script>
            document.firstElementChild;
            //存取第一個子元素
            document.lastElementChild;
            //存取最後一個子元素
            document.children;
            //存取document下的所有子元素
            document.children[3];
            //存取document下的第三個子元素
            document.getElementsByTagName("input");
            //存取後代元素中所有input元素集合
            document.getElementsByName("byname");
            //存取html元素中name屬性為byname的元素集合
            document.getElementById("byname");
            //存取html元素中id屬性為byname的元素
</script>

建立文字節點&元素節點

document.createTextNode(""):建立文字節點
ex: document.createTextNode("hello");//建立一個文字內容為hello的文字節點
document.createElement(""):建立元素節點
ex: document.createElement("li");//建立一個html的li元素節點

加入某元素的子節點&某元素子節點長度

appendChild:加入某元素的子節點
children.length: 某元素的子節點長度

結語

這篇文章介紹了什麼是event事件和DOM文件物件模型，但在event的部分還沒帶大家認識到各種常用的事件屬性，而DOM則介紹了許多，像是DOM樹狀結構、存取節點和元素節點的屬性、建立文字節點和元素節點的屬性以及如何在html元素中加入子節點等，下篇將會介紹如何用今天所認識的DOM屬性來完成一個簡單的例子!